<template>
	
	<div class="common-layout">
		 <el-container>
			<el-main class="hidden-xs-only">
				<span class="imgPosition">
					<img src="../../assets/img/logo.png" >
				</span>
				<br>
			 	<!-- <span class="leftTitle">
					微客计划，更专注于小微客户账务
				</span> -->
			</el-main>
			<el-aside  class="showAllWindow">
				<span class="rightLogo" style="text-align: center;display: block;" >
					<img src="../../assets/img/logo.png" style="text-align: center;" >
				</span>
				<br>
				<span class="tip">
					登录微客账号
				</span>
				
				<!-- 表单 -->
				<div class="loginFrom" >
					<el-form ref="formRef" :model="loginForm">					    
						<el-form-item size="large" 
						 :rules="[{ required:ture,message:'必须输入数字登录账号' }]"
						 >
							<el-input 
							:suffix-icon="Calendar" 
							v-model="loginForm.userId" 
							class="input_"
							placeholder="请输入用户名(只能为纯数字)" 
							oninput ="value=value.replace(/[^0-9.]/g,'')"
							>					
							</el-input>
					    </el-form-item>
						
						<el-form-item size="large" >
							<el-input 
							show-password type="password" 
							v-model="loginForm.passWord"
							placeholder="请输入密码"
							class="input_">								
							</el-input>
						</el-form-item>
						<span
						style="font-size: 0.75rem; display: block; text-align: center;margin-top:1.875rem;">
						登录即表示您已阅读并同意《用户协议》和《客户隐私》
						</span>

						<el-form-item class="input_2" >							
								<el-button type="primary" 
								 style="color:white;width: 9.5rem;" @click="subFun">
								  登陆
								</el-button>													      
								
								<router-link to="/register" style="text-decoration: none;">
									<el-button style="width: 9.5rem;margin-left:2rem;" >
									注册
									</el-button>
								</router-link>	
					    </el-form-item>
					</el-form>
				</div>
				<div class="loginFooter">
					<span>
						 —— 更多登录方式 ——
					</span>
					<ul class="loginWay">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</el-aside>	
		</el-container>	
	</div>
	
</template>


<script lang="ts" setup>
import router from '../../router/index.js'
import { reactive } from 'vue'
// axios
import { login } from "../../http/login_register.js"
// 图标
import { Calendar, Search,Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
let loginForm = reactive({
  userId: '',
  passWord:'',
})
//登录操作
const subFun = () => {
	let _this = this
	// 1.判断账户密码是否为空
	if(!loginForm.userId || !loginForm.passWord){
		ElMessage.error("请输入账户和密码")
		return
	}
	// 2.执行登录
	login(loginForm).then(res=>{
		//回调为空表面密码错误，成功产生token
		if(res.data==""){
			ElMessage.error("账户密码错误")
		}else{
			sessionStorage.setItem("access-admin",JSON.stringify(res.data))
			router.push("/data_statistic")
		}
	})
	
}

	
</script>

<style type="text/css" scoped>
	
	*{
		margin: 0;
		padding: 0;	
	}
	.common-layout{
		height: 100%;
	}
	.el-aside {
		background-color:white;  
		color: var(--el-text-color-primary);
		width:30.1rem;
		height: 100%;
	}
	.el-container{
		height: 100%;
	}
	:deep(.loginFrom  .el-form-item__content){
		margin-top: 20px;
		justify-content: center;
	}
	.rightLogo img{
		width: auto;
		height: 120px;
		margin-top: 2.125rem;
	}
	@media screen and (max-width: 768px) {
		.el-aside {
		    width:100%;
			height:100%;		
		}
		
	}
	.el-main {
		background-color: #e9eef3;
		background-image: url(../../assets/img/loginBkg.jpeg);
		background-repeat:no-repeat;
		background-size:cover;
		color: var(--el-text-color-primary);
		height:100%;
	}	
	.imgPosition{
		position: relative;
		top:3.8rem;
		left: 19rem;
	}
	.leftTitle{
		position: relative;
		top: 7rem;
		left: 3rem;
		width: 38rem;
		font-size: 4rem;	
		color:#293e74;
		font-family:"黑体"
	}
	.tip{
		display:block;
		text-align: center;
		font-weight: 700;
		margin-top: 20px;
	}
	.loginFrom{
		margin-top: 1.125rem;
		text-align: center;
	}
	
	.input_{
		width: 21rem;
		text-align: center;
		
	
	}
	.input_2{
		margin-top: 30px;
		text-align: center;
	}
	.loginFooter{
		text-align: center;
		margin-top:2.5rem;
		height: 1.25rem;
		font-weight: 100;
	}
	.loginWay{
		text-decoration: none;
		text-align: center;	
		height:3.75rem;
		margin-top: 1.25rem;
	}
	.loginWay li{
		display: inline-block;
		height: 3.75rem;
		line-height: 3.75rem;
		width: 3.75rem;
		margin-left:1.25rem;
		margin-top: 1.25rem;
	}
	.loginWay li:first-child{
		background: url(../../assets/img/qq.svg);
		background-repeat: no-repeat;
		background-size:cover;
		margin-left: 0rem;
	}
	.loginWay li:nth-child(2){
		background: url(../../assets/img/Wx.svg);
		background-repeat: no-repeat;
		background-size:cover;
	}
	.loginWay li:nth-child(3){
		background: url(../../assets/img/compriseWx.svg);
		background-repeat: no-repeat;
		background-size:cover;
	}
	.loginWay li:last-child{
		background: url(../../assets/img/dingtalk.svg);
		background-repeat: no-repeat;
		background-size:cover;
	}
</style>

